import CommentInput from '@/components/CommentInput'
import Icon from '@/components/Icon'
import Loading from '@/components/loading/index'
import NoneComment from '@/components/NoneComment'
import { useCodeLight, useMove } from '@/hooks'
import { formatTime } from '@/utils/auth'
import { history } from '@/utils/history'
import { InfiniteScroll, NavBar, Popup } from 'antd-mobile'
import classNames from 'classnames'
import dp from 'dompurify'
import 'highlight.js/styles/dark.css'
import { useState } from 'react'
import { useParams } from 'react-router-dom'
import CommentFooter from './components/CommentFooter'
import CommentItem from './components/CommentItem'
import styles from './index.module.scss'
import {
  useChangeAttitude,
  useGetComment,
  useMoveComment,
  useRenderArticle,
} from './service'
const Article = () => {
  // 高亮代码
  useCodeLight()
  const params = useParams<{ art_id: string }>()
  const { article, loading } = useRenderArticle(params.art_id!)
  const { commentRef, wrapperRef, onShowComment } = useMoveComment()
  const { changeCtx } = useChangeAttitude(article)
  const { hasMore, loadMoreComments, commentList } = useGetComment(
    params.art_id!
  )
  const [commentVisible, setCommentVisible] = useState(false)
  const onCommentShow = () => setCommentVisible(true)
  const onCommentHide = () => setCommentVisible(false)
  useMove(commentRef.current, commentList, 'bottom', wrapperRef.current)
  // console.log(article.art_id)
  const renderArticle = () => {
    // 文章详情
    return (
      <div className="wrapper" ref={wrapperRef}>
        <div className="article-wrapper">
          <div className="header">
            <h1 className="title">{article.title}</h1>

            <div className="info">
              <span>{formatTime(article.pubdate)}</span>
              <span>{article.read_count} 阅读</span>
              <span>{article.comm_count} 评论</span>
            </div>

            <div className="author">
              <img src={article.aut_photo} alt="" />
              <span className="name">{article.aut_name}</span>
              <span
                onClick={() => changeCtx('follow', article.aut_id)}
                className={classNames(
                  'follow',
                  article.is_followed ? 'followed' : ''
                )}>
                {article.is_followed ? '已关注' : '关注'}
              </span>
            </div>
          </div>

          <div className="content">
            <div
              className="content-html dg-html"
              dangerouslySetInnerHTML={{
                __html: dp.sanitize(article.content),
              }}></div>
            <div className="date">
              发布文章时间：{formatTime(article.pubdate)}
            </div>
          </div>
        </div>

        <div className="comment" ref={commentRef}>
          <div className="comment-header">
            <span>全部评论（{article.comm_count}）</span>
            <span>{article.like_count} 点赞</span>
          </div>
          {article.comm_count === 0 ? (
            <NoneComment />
          ) : (
            <div className="comment-list">
              {commentList.map((item) => (
                <CommentItem key={item.com_id} item={item} />
              ))}
              <InfiniteScroll hasMore={hasMore} loadMore={loadMoreComments} />
            </div>
          )}
        </div>
      </div>
    )
  }
  if (loading) {
    return <Loading />
  } else {
    return (
      <div className={styles.root}>
        <div className="root-wrapper">
          <NavBar
            onBack={() => history.go(-1)}
            right={
              <span>
                <Icon icon="icongengduo" />
              </span>
            }>
            {true && (
              <div className="nav-author">
                <img
                  src="http://geek.itheima.net/images/user_head.jpg"
                  alt=""
                />
                <span className="name">{article.aut_name}</span>
                <span
                  className={classNames(
                    'follow',
                    article.is_followed ? 'followed' : ''
                  )}>
                  {article.is_followed ? '已关注' : '关注'}
                </span>
              </div>
            )}
          </NavBar>
          {/* 文章详情和评论 */}
          {renderArticle()}

          {/* 底部评论栏 */}
          <CommentFooter
            onShowComment={onShowComment}
            article={article}
            changeContext={(type, id) => changeCtx(type, id)}
            controlInput={onCommentShow}
          />
        </div>
        <Popup
          visible={commentVisible}
          position="left"
          onMaskClick={onCommentHide}
          destroyOnClose={true}>
          {/* 弹层内容 */}
          <CommentInput
            onClose={onCommentHide}
            id={params.art_id!}
            total={article.comm_count}
          />
        </Popup>
      </div>
    )
  }
}

export default Article
